<template>
  <div class="addNews">
    <mains :title="'新增消息公告'">
      <template #content>
        <Card style="width: 100%">
          <template #title>
            <div class="title">编辑文章信息</div>
          </template>
          <!-- 表单区域 -->
          <Form
            ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="80"
            label-position="left"
          >
            <FormItem label="标题" prop="title">
              <Input
                v-model="formValidate.title"
                placeholder="请输入标题"
                style="width: 240px"
              ></Input>
            </FormItem>
            <FormItem label="上传人" prop="author">
              <Input
                v-model="formValidate.author"
                placeholder="请输入内容"
                style="width: 240px"
              ></Input>
            </FormItem>
            <FormItem label="内容" prop="describe" label-width="100%">
              <QuillEditor
                style="width: 80%; height: 300px"
                contentType="html"
                v-model:content="formValidate.describe"
                ref="quillEditor"
              >
              </QuillEditor>
            </FormItem>
            <FormItem label="状态" prop="isEnable">
              <Switch v-model="formValidate.isEnable" />
            </FormItem>
            <FormItem label="上传时间" prop="time">
              <DatePicker v-model="formValidate.time" type="date" placeholder="请选择日期" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
              <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
            </FormItem>
          </Form>
        </Card>
      </template>
    </mains>
  </div>
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import mains from '@/components/main.vue'
import { ref } from 'vue'

const quillEditor = ref(null)
let formValidate = ref({
  title: '',
  author: '',
  describe: '',
  isEnable: true,
  time: '',
})
const ruleValidate = ref({
  title: [
    {
      required: true,
      message: '请输入角色名称',
      trigger: 'blur',
    },
  ],
  describe: [
    {
      required: true,
      message: '请输入角色描述',
      trigger: 'blur',
    },
  ],
})
</script>

<style scoped>
.addNews {
  :deep(.ivu-card-head) {
    background: #ebeef1;
  }
  .title {
    font-size: 16px;
    font-weight: 800;
    color: #409eff;
  }
  :deep(.ql-toolbar.ql-snow) {
    width: 80%;
    margin-top: 40px;
  }
}
</style>
